﻿<link href="~/css/table.css" rel="stylesheet" />
<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet"
          href="../../css/table.css" type="text/css">
</head>
<body>
    <div id="app">
        <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">
                            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--I级机构设置--I级机构添加
                        </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button v-on:click="add()">添加</el-button>
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>

            <table width="100%" border="1" cellpadding=0 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        I级机构编号
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="firstKindId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.firstKindId" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        I级机构名称
                    </td>

                    <td class="TD_STYLE2" height="40px">
                        <el-form-item prop="firstKindName" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.firstKindName" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        薪酬发放责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="firstKindSalaryId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.firstKindSalaryId"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        销售责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="firstKindSaleId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.firstKindSaleId"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>
            </table>

            <el-dialog v-model="dialogVisible"
                       title=""
                       width="500"
                       :before-close="handleClose">
                <span>录入成功！</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button v-on:click="edit()" type="danger">继续录入</el-button>
                        <el-button type="primary" v-on:click="close()">
                            返回
                        </el-button>
                    </div>
                </template>
            </el-dialog>
    </div>

</body>
</html>
<script type="text/javascript">
    const { createApp, ref, reactive, computed } = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const ruleForm = reactive({
                firstKindId:"",//一级机构编号
                firstKindName:"",//一级机构名称
                firstKindSalaryId:"",//负责人编号
                firstKindSaleId:""//销售负责人编号
            })

            let ruleFormRef = ref(null);//表单id
            //表单验证规则
             const rules = reactive({
            firstKindId: [
                { required: true, message: '1级机构编号不能位空', trigger: 'blur' },
                { validator: (rule, value, callback) => {
                    if (value && value.toString().length !== 13) {
                        callback(new Error('I级机构编号长度必须为十三位'));
                    } else {
                        callback();
                    }
                },
                trigger: 'blur' }
            ],
            firstKindName: [
                { required: true, message: '级机构名称不能位空', trigger: 'blur' },

            ],firstKindSalaryId: [
                { required: true, message: '薪酬发放责任人编号不能位空', trigger: 'blur' },
            ],
            firstKindSaleId: [
                { required: true, message: '销售责任人编号不能位空', trigger: 'blur' },

            ],
        })
            const dialogVisible = ref(false)

            function add(){
                ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        //发ajax提交
                        axios.get("/CFFK/CFFKSelectByName",{
                            params:{
                                name : ruleForm.firstKindId
                            }
                        }).then(res =>{
                            if (res.data == null){
                                axios.post("/CFFK/CFFKInsert",null,{
                                    params:ruleForm
                                }).then(res=>{
                                    if (res.data > 0){
                                        ElMessage({
                                        type: 'success',
                                        message: '添加成功！'});
                                        dialogVisible.value = true
                                    }else{
                                        ElMessage({
                                        type: 'error',
                                        message: '添加失败！'
                                    });
                                }}).catch(Error =>{
                                    console.info(Error)
                                })
                            }else{
                                ElMessage({
                                type: 'error',
                                message: '该I级编号已存在！请修改后再次提交'});
                            }
                        }).catch(Error =>{
                            console.info(Error)
                        })
                    }
                })
            }

            function close(){
                window.location.href = "/CFFK/Index"
            }

            function edit(){
                window.location.href = "/CFFK/CFFKInsert"
            }

            return {
                ruleForm, ruleFormRef, rules,add,dialogVisible,close,edit
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    body {
        background-color: #ffffcc;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }

    .el-form-item__error {
        color: var(--el-color-danger);
        font-size: 12px;
        left: 0;
        line-height: 1;
        padding-top: 2px;
        position: static !important;
        margin-left: 10px;
        top: 100%;
    }

    .el-form-item {
        display: flex;
        --font-size: 14px;
        margin-bottom: 0px !important;
    }

</style>
